<script setup>
defineProps({
  mode: {
    type: String,
    default: 'vertical',
  },
});
// const {appConfig, menuList} = useRootSetting();
// const collapse = computed(() =>
//   appConfig.value.sidebarMode === 'horizontal' ? false : appConfig.value.collapseMenu,
// );
// const menuData = computed(() => {
//   return appConfig.value.sidebarMode === 'blend' ? menuList.value.menuList[1].children : menuList.value.menuList;
// })
const menuData = [
  {
    path: '/welcome',
    name: 'RtWelcomwelcomewelcomewelcomewelcomee',
    meta: {
      title: 'welcome',
      icon: 'iEL-home-filled',
      position: 1,
      keepAlive: true,
      pathList: [1],
    },
  },
  {
    path: '/nested',
    redirect: '/nested/menu1',
    name: 'RtNested',
    meta: {
      title: 'nested',
      icon: 'iEL-grid',
      position: 6,
      pathList: [2],
    },
    children: [
      {
        path: '/nested/menu1',
        name: 'RtMenu1',
        redirect: '/nested/menu1/menu1-1',
        meta: {
          title: 'route.pathName.nested1',
          pathList: [2, 0],
        },
        children: [
          {
            path: '/nested/menu1/menu1-1',
            name: 'RtMenu1-1',
            meta: {
              title: 'route.pathName.nested1_1',
              pathList: [2, 0, 0],
            },
          },
          {
            path: '/nested/menu1/menu1-2',
            name: 'RtMenu1-2',
            redirect: '/nested/menu1/menu1-2/menu1-2-1',
            meta: {
              title: 'route.pathName.nested1_2',
              pathList: [2, 0, 1],
            },
            children: [
              {
                path: '/nested/menu1/menu1-2/menu1-2-1',
                name: 'RtMenu1-2-1',
                meta: {
                  title: 'route.pathName.nested1_2_1',
                  pathList: [2, 0, 1, 0],
                },
              },
              {
                path: '/nested/menu1/menu1-2/menu1-2-2',
                name: 'RtMenu1-2-2',
                meta: {
                  title: 'route.pathName.nested1_2_2',
                  pathList: [2, 0, 1, 1],
                },
              },
            ],
          },
          {
            path: '/nested/menu1/menu1-3',
            name: 'RtMenu1-3',
            meta: {
              title: 'route.pathName.nested1_3',
              pathList: [2, 0, 2],
            },
          },
        ],
      },
      {
        path: '/nested/menu2',
        name: 'RtMenu2',
        meta: {
          title: 'route.pathName.nested2',
          pathList: [2, 1],
        },
      },
    ],
  },
  {
    path: '/permissions',
    redirect: '/permissions/page',
    name: 'RtPermissions',
    meta: {
      title: 'route.pathName.permissions',
      icon: 'guide',
      position: 7,
      pathList: [3],
    },
    children: [
      {
        path: '/permissions/page',
        name: 'RtPermissionsPage',
        meta: {
          title: 'route.pathName.permissionsPage',
          pathList: [3, 0],
        },
      },
      {
        path: '/permissions/test-page-admin',
        name: 'RtPermissionsTestPageAdmin',
        meta: {
          title: 'route.pathName.testPermissionsPage1',
          roles: ['admin'],
          pathList: [3, 1],
        },
      },
    ],
  },
  {
    path: '/details_page',
    name: 'RtDetailsPage',
    meta: {
      title: 'route.pathName.detailsPage',
      icon: 'iEL-management',
      position: 10,
      pathList: [0],
    },
    children: [
      {
        path: '/details_page/details_info',
        name: 'RtDetailsInfo',
        meta: {
          title: '',
          icon: 'iEL-management',
          whiteRoute: true,
          keepAlive: true,
          hideSidebar: true,
          pathList: [0, 0],
        },
      },
      {
        path: '/details_page/details_params/:id',
        name: 'RtDetailsParams',
        meta: {
          title: '',
          icon: 'iEL-management',
          whiteRoute: true,
          keepAlive: true,
          hideSidebar: true,
          pathList: [0, 1],
        },
      },
    ],
  },
];
</script>

<template>
  <el-scrollbar wrap-class="scrollbar-wrapper">
    <!--
      default-active	        页面加载时默认激活菜单的 index
      unique-opened	          是否只保持一个子菜单的展开
      collapse	              是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
      mode	                  菜单展示模式
      collapse-transition	    是否开启折叠动画
-->
    <el-menu :unique-opened="true">
      <SidebarItem
        v-for="menuRoute in menuData"
        :key="menuRoute.path"
        :item="menuRoute"
        :is-nest="false"
        :base-path="menuRoute.path"
        :mode="mode"
      />
    </el-menu>
  </el-scrollbar>
</template>
